<template>
  <view class="revert-form-info">
    <view class="item item_r-info">
      <view class="i-item">
        <view class="title">订单信息</view>
      </view>
      <view class="i-item sn">
        <view class="l-i-item">
          <view>订单编号</view>
          <view class="l-i-sn">{{ black_Get(revertFormInfo,'sn') }}</view>
        </view>
        <text class="r-i-item" style="color: #DB187C;" @click="copyText($_.get(revertFormInfo,'sn'))">复制</text>
      </view>
      <view class="i-item">
        <text>调换数量</text>
        <text>{{ black_Get(revertFormInfo,'quantity','0') }}件</text>
      </view>
      <view class="i-item">
        <text>袋子费</text>
        <text style="margin-left: 57rpx;">{{ black_Get(revertFormInfo,'amountPackage','0') }}元</text>
      </view>
      <view class="i-item">
        <text>调换时间</text>
        <text>{{ black_Get(revertFormInfo,'createTime') }}</text>
      </view>
      <view class="i-item">
        <text>订单状态</text>
        <text style="color: #DB187C;">{{ revertFormStatus(revertFormInfo.status)}}</text>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isQualifiedShow = !isQualifiedShow">
        <view class="item-header-title">
          <text>合格商品</text>
          <text>{{ qualifiedSum }}件</text>
        </view>
        <icon class="iconfont">{{ isQualifiedShow ? '&#xe62b;' : '&#xe62c;' }}</icon>
      </view>
      <view class="content" v-show="isQualifiedShow">
        <view class="c-item" v-for="(item,i) in qualifiedGoodsList" :key="i" @tap="onOpenPopup(item)">
          <text>{{ item.goods.name }}</text>
          <text>{{ item.pgiQuantity }}件</text>
        </view>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isNotqualifiedShow = !isNotqualifiedShow">
        <view class="item-header-title">
          <text>不合格商品</text>
          <text>{{ notqualifiedSum }}件</text>
        </view>
        <icon class="iconfont">{{ isNotqualifiedShow ? '&#xe62b;' : '&#xe62c;' }}</icon>
      </view>
      <view class="content" v-show="isNotqualifiedShow">
        <view class="c-item" v-for="(item,i) in notqualifiedGoodsList" :key="i" @tap="onOpenPopup(item)">
          <text>{{ item.goods.name }}</text>
          <text>{{ item.pgiQuantity }}件</text>
        </view>
      </view>
    </view>

    <van-popup
      :show="popup.show"
      round
      position="bottom"
      custom-style="height: 75%"
      @close="popup.show = false"
      class="popup"
    >
      <view class="p-header">
        <view class="title">
          <text>{{ popup.selectItem.goods.name }}</text>
          <van-icon name="cross" @tap="popup.show = false" />
        </view>
        <view class="table table_header">
          <view class="t-col">颜色</view>
          <view class="t-col">码数</view>
          <view class="t-col">数量</view>
          <view class="t-col">单价</view>
          <view class="t-col">金额</view>
          <view class="t-col">积分</view>
        </view>
      </view>
      <view class="p-body">
        <view class="table table_row" v-for="(item,i) in popup.selectItem.pgiList" :key="i">
          <view class="t-col">{{ item.goodsItems.specJson | colorFilter }}</view>
          <view class="t-col">{{ item.goodsItems.specJson | sizeFilter }}</view>
          <view class="t-col">{{ item.quantity }}</view>
          <view class="t-col">{{ item.goodsItems.amountCost + item.goodsItems.amountCostAbove }}</view>
          <view class="t-col">
            {{ (item.quantity*(item.goodsItems.amountCost+item.goodsItems.amountCostAbove)).toFixed(2) }}
          </view>
          <view
            class="t-col"
          >{{ (item.goodsItems.integralGiveDividend / item.goodsItems.integralGiveDivisor * item.quantity).toFixed(2) }}
          </view>
        </view>
      </view>
    </van-popup>

    <a-empty v-if="!revertFormInfo" :src="'empty/order.png'|prefixOssUrl" :tips="['暂无相关订单']"></a-empty>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
import { model } from '@/model';

const { Revert } = model.collection;

var _ = require('lodash');
export default {
  data () {
    return {
      id: '',
      revertFormInfo: {},
      isQualifiedShow: false,
      isNotqualifiedShow: false,
      qualifiedList: [],
      notqualifiedList: [],
      popup: {
        title: '',
        selectItem: {},
        show: false
      }
    }
  },
  onLoad (options) {
    this.id = options.id;
    this.getrevertFormInfo();
  },
  filters: {
    sizeFilter (v) {
      return JSON.parse(v).find(i => i.key === '尺码').value;
    },
    colorFilter (v) {
      return JSON.parse(v).find(i => i.key === '颜色').value;
    }
  },
  computed: {
    qualifiedSum () {
      return this.qualifiedList.reduce((p, c) => p += c.quantity, 0)
    },
    notqualifiedSum () {
      return this.notqualifiedList.reduce((p, c) => p += c.quantity, 0)
    },
    qualifiedGoodsList () {
      let l = [];
      const qualifiedList = _.get(this, 'qualifiedList', []);
      qualifiedList.forEach(i => {
        let tar = _.find(l, x => {
          return _.get(x.goods, 'goodsId') === _.get(i, 'goodsItems.goodsId') && _.get(i,
            'goodsItems.goodsId')
        });
        if (tar) {
          tar.pgiList.push(i);
          tar.pgiQuantity = tar.pgiQuantity + _.get(i, 'quantity');
        } else {
          l.push({
            goods: _.get(i, 'goodsItems'),
            pgiList: [i],
            pgiQuantity: _.get(i, 'quantity')
          })
        }
      })
      return l;
    },
    notqualifiedGoodsList () {
      let l = [];
      const notqualifiedList = _.get(this, 'notqualifiedList', []);
      notqualifiedList.forEach(i => {
        let tar = _.find(l, x => {
          return _.get(x.goods, 'goodsId') === _.get(i, 'goodsItems.goodsId') && _.get(i,
            'goodsItems.goodsId')
        });
        if (tar) {
          tar.pgiList.push(i);
          tar.pgiQuantity = tar.pgiQuantity + _.get(i, 'quantity');
        } else {
          l.push({
            goods: _.get(i, 'goodsItems'),
            pgiList: [i],
            pgiQuantity: _.get(i, 'quantity')
          })
        }
      })
      return l;
    }
  },
  methods: {
    getrevertFormInfo () {
      Revert.sendApi('info', { params: {}, data: { query: { id: this.id } } }).then(res => {
        const { status, data } = res;
        if (status) {
          if (data) {
            this.revertFormInfo = data;
            data.revertFormSortList.forEach(i => {
              if (i.status === 1) {
                this.qualifiedList.push(i);
              } else {
                this.notqualifiedList.push(i);
              }
            });
          }
        }
      })
    },
    onOpenPopup (e) {
      this.popup.selectItem = e;
      this.popup.show = true;
    }
  }
}
</script>

<style lang="less">
page {
  background-color: #f7f7f7;

  .revert-form-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .popup {
      .p-header {
        position: fixed;
        width: 100%;
        background-color: #fff;
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 20rpx;
          text-align: left;
          font-size: 36rpx;
          font-weight: bold;
        }

        .table_header {
          padding: 20rpx 0;
          display: flex;
          justify-content: space-around;
          font-size: 30rpx;
          border-bottom: 1rpx solid #ccc;
          color: #333;
        }
      }

      .p-body {
        padding-top: 180rpx;

        .table_row {
          display: flex;
          justify-content: space-around;
          padding: 20rpx 0;
          font-size: 30rpx;
          color: #666;
        }
      }
    }

    .item {
      width: 660rpx;
      padding: 20rpx;
      margin-top: 30rpx;
      background: #fff;
      border-radius: 20rpx;

      &_r-info {
        .i-item {
          margin-bottom: 35rpx;
          font-size: 28rpx;
          color: #666666;

          .l-i-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .l-i-sn {
              width: 433rpx;
              margin-left: 30rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          text:nth-child(2) {
            margin-left: 30rpx;
          }

          .title {
            padding-left: 10rpx;
            font-size: 31rpx;
            font-weight: bold;
            border-left: 8rpx solid #d61e85;
          }
        }

        .sn {
          display: flex;
          justify-content: space-between;
        }
      }

      &_goods-info {
        .header {
          height: 43rpx;
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;

          .item-header-title {
            padding-left: 10rpx;
            font-size: 31rpx;
            font-weight: bold;
            border-left: 8rpx solid #d61e85;

            text:nth-child(2) {
              margin-left: 35rpx;
            }
          }
        }

        .content {
          .c-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            font-size: 29rpx;
            color: #333333;
          }

          text:nth-child(2) {
            color: #d61e85;
          }
        }
      }
    }

    .foot-info {
      margin: 30rpx 0;
      padding: 0 20rpx;

      .f-item {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20rpx;

        .f-item-name {
          width: 160rpx;
          margin-right: 15rpx;
        }

        .f-item-text {
          width: 500rpx;
        }
      }
    }
  }
}
</style>
